<template>
  <button @click="update">更改</button>
</template>

<script>
import { ref ,readonly, reactive} from "vue";

export default {

  setup() {
    //普通对象，能用不能改
    const info1 = {name : "wmy"};
    const readonlyInfo1 = readonly(info1);

    //响应式对象 reactive
    const info2 = reactive({name : "wmy"});
    const readonlyInfo2 = readonly(info2);

    //响应式对象 ref
    const info3 = ref("wmy");
    const readonlyInfo3 = readonly(info3);


    const update = ()=>{
      // readonlyInfo1.name = "code wmy"
      // readonlyInfo2.name = "code wmy"
      readonlyInfo3.value = "code wmy"
    }
    //进行响应式的处理

    return {
      update
    }
  }

}
</script>

<style scoped>

</style>